<template>
  <div class="login" id="login">
    <img src="../../assets/img/denglu_bg@2x.png" alt="" class="login_bg">
    <div class="loginBox">
      <p class="title">您好,</p>
      <p class="title_name">欢迎使用 智慧云支部（试用）</p>
      <mu-container class="mu-containers">
        <mu-form ref="form" :model="validateForm" class="mu-demo-form">
          <mu-form-item prop="phone" :rules="phoneRules">
            <!--<input type="text" v-model="validateForm.phone" prop="phone" placeholder="请输入手机号">-->
            <mu-text-field v-model="validateForm.phone" type="Number" prop="phone" placeholder="请输入手机号"></mu-text-field>
          </mu-form-item>
          <mu-form-item prop="password" :rules="passwordRules">
            <!--<input type="password"-->
                   <!--v-model="validateForm.password"-->
                   <!--prop="password"-->
                   <!--placeholder="请输入登录密码"-->
            <!--&gt;-->
            <mu-text-field
              v-model="validateForm.password"
              prop="password"
              placeholder="请输入登录密码"
              :action-icon="visibility ? 'visibility_off' : 'visibility'"
              :action-click="() => (visibility = !visibility)"
              :type="visibility ? 'text' : 'password'"
            ></mu-text-field>
          </mu-form-item>
        </mu-form>
      </mu-container>

      <div class="sign">
        <div>
          <p @click="forgetPasswoed">忘记密码</p>
          <p class="solid"></p>
          <p @click="register">免费注册</p>
        </div>

        <img
          v-if="this.validateForm.phone == '' || this.validateForm.password == ''"
          src="@as/img/xiayibu_moren@2x.png"
        >

        <img
          v-if="this.validateForm.phone != '' && this.validateForm.password != ''"
          src="@as/img/xiayibu@2x.png"
          alt
          @click="submit()"
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visibility: false,
      phoneRules: [
        { validate: val => !!val, message: "必须填写手机号" },
        {
          validate: val => /^1[34578]\d{9}$/.test(val),
          message: "手机号格式不正确"
        }
      ],
      passwordRules: [
        { validate: val => !!val, message: "必须填写密码" },
        {
          validate: val => val.length >= 3 && val.length <= 10,
          message: "密码长度大于3小于10"
        }
      ],
      //   argeeRules: [{ validate: val => !!val, message: "必须同意用户协议" }],
      validateForm: {
        phone: "",
        password: ""
      }
    };
  },
  mounted() {
     this.$progress.done();//加载跳完成
      var winHeight = $(window).height(); //获取当前页面高度
      // alert(winHeight)
      // alert(winHeight+'originHeight')
      $(window).resize(function(){
          console.log("窗口大小变化");
          var thisHeight = $(window).height();  //窗体变化后的高度
          //当窗体大小变化时
          if(thisHeight!=winHeight){
              // $('.login').addClass('up')
              //   $('.login').css('margin-bottom',winHeight-thisHeight)
          }else{
              // $('.login').removeClass('up')
          }
          // alert(thisHeight+'newheight')
          // if (winHeight - thisHeight > 50) {
          //     $('#login').css('height', winHeight + 'px');
          //     $('#login').addClass('keyBorderUp')
          // } else {
          //     $('#login').css('height', '100%');
          //     $('#login').removeClass('keyBorderUp')
          // }
      })

  },
  methods: {
    register() {
      this.$router.push({
        path: "/register"
      });
    },
    forgetPasswoed() {
      this.$router.push({
        path: "/forgetPassword"
      });
    },
    submit() {
      this.$refs.form.validate().then(vaild => {
        if (vaild) {
          this.$http
            .post("/app/Login/index", {
              ...this.validateForm,
              org_id: "11"
            })
            .then(res => {
              this.$toast.success(res.msg);
                Cookies.set('user_71ydj', res.data, { expires: 0.5 }) // 设置本地存储信息
              // if (this.$route.query.redirect) {
              //   this.$router.replace({
              //       path:this.$route.query.redirect
              //   });
              // } else {
                this.$router.replace({path:'/home'});
              // }
            });
        }
      });
    },
    clear() {
      this.$refs.form.clear();
      this.validateForm = {
        username: "",
        password: "",
        isAgree: false
      };
    }
  }
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  /*background-image: url("../../assets/img/denglu_bg@2x.png");*/
  /*background-repeat: no-repeat;*/
  /*background-size:contain;*/
  background-position:0 0 ;
  position: relative;
  .login_bg{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
  }
  /deep/ .mu-form-item__error .mu-form-item-help {
    color: #fff;
  }
  &.up{
    background: black !important;
  }
  .mu-containers{
    position: relative;
  }
  // border:1px solid #000
}
#login.keyBorderUp{
}
.title {
  font-size: 36px;
  /*margin-top:50px;*/
  margin-bottom: 14px;
  font-weight: Medium;
  color: white;
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
}
.title_name{
  font-size:14px;
  font-weight:500;
  color:rgba(255,255,255,0.7);
  /*margin-bottom: 175px;*/
  position: absolute;
  top: 104px;
  left: 0;
  width: 100%;
}
#login.keyBorderUp{
  .title_name{
    margin-bottom: 26px;
  }
}
.loginBox {
  width: 85%;
  position: relative;
  height: 100%;
  //  border:1px solid #000
}
.mu-demo-form {
  width: 100%;
  max-width: 460px;
  position: absolute;
  left: 0;
  top: 175px;
  //  border:1px solid #000
}

.solid {
  border-left: 1px solid #eee !important;
  height: 15px;
  width: 0px;
  margin: 10px;
}
.mu-form-item{
  margin-bottom: 22px;
  /deep/.mu-form-item-content{
    .mu-input-content{
      display: inline-block !important;
      position: relative;
      .mu-text-field-input{
        width:100%;
        height:60px;
        background:rgba(255,255,255,1);
        box-shadow:0px 9px 58px 0px rgba(235,78,69,0.05);
        border-radius:30px;
        font-size: 16px;
        border:none;
        color: #333333;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        padding-left: 22px;
      }
      .mu-icon{
        position: absolute;
        right: 33px;
        top: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        /*margin-top: 50%;*/
      }
      .mu-input-line{
        height: 0;
      }
      .mu-input-focus-line{
        height: 0;
      }

    }

  }
}

.mu-form-item-content input{
  width:100%;
  height:60px;
  background:rgba(255,255,255,1);
  box-shadow:0px 9px 58px 0px rgba(235,78,69,0.05);
  border-radius:30px;
  font-size: 16px;
  border:none;
  color: #333333;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 22px;
}
.sign {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
  position: absolute;
  left: 0;
  top:330px;
  width: 100%;
  div {
    width: 150px;
    border: 1px solid rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
  }
  p {
    font-size: 12.5px;
    color: #f47548;
  }

  img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
  }
}
</style>